<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>商品标签</title>
  <style>
    body {
      margin: 0;
      padding: 5px;
      width: 100%;
      max-width: 40mm;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", Arial, sans-serif;
      font-size: 12px;
      -webkit-print-color-adjust: exact;
    }
    .label {
      text-align: center;
      width: 100%;
      min-height: 100%;
      background-color: white;
    }
    .room-info {
      margin-bottom: 5px;
    }
    .product-info {
      margin: 5px 0;
      font-size: 16px;
      font-weight: bold;
    }
    .time {
      font-size: 10px;
      color: #666;
      margin-top: 5px;
    }
    
    @media print {
      body {
        width: 100%;
        margin: 0;
        padding: 0;
      }
      .label {
        width: 100%;
        padding: 2mm;
      }
      * {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
      }
    }
  </style>
</head>
<body>
  <div class="label">
    <div class="room-info">
      <span id="roomName"></span>
    </div>
    <div class="product-info">
      <span id="productName"></span>
    </div>
    <div class="time">
      <span id="time"></span>
    </div>
  </div>

  <script>
    const { ipcRenderer } = require('electron');
    
    ipcRenderer.on('label-data', async (event, data) => {
      try {
        // 渲染数据
        document.getElementById('roomName').textContent = data.roomName;
        document.getElementById('productName').textContent = data.productName + ' x ' + data.quantity;
        document.getElementById('time').textContent = data.time;
        return true;
      } catch (error) {
        console.error('Error rendering label:', error);
      }
    });

  </script>
</body>
</html> 